import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useDeviceStore = defineStore('device', () => {
  const isMobile = ref(false)
  const isTablet = ref(false)
  const isPc = ref(true)
  const screenWidth = ref(window.innerWidth)

  const checkDevice = () => {
    screenWidth.value = window.innerWidth
    
    if (screenWidth.value < 768) {
      isMobile.value = true
      isTablet.value = false
      isPc.value = false
    } else if (screenWidth.value >= 768 && screenWidth.value <= 1024) {
      isMobile.value = false
      isTablet.value = true
      isPc.value = false
    } else {
      isMobile.value = false
      isTablet.value = false
      isPc.value = true
    }
  }

  return {
    isMobile,
    isTablet,
    isPc,
    screenWidth,
    checkDevice
  }
})